<template>
  <AppPage :show-footer="true">
    <div class="flex">
      <n-card class="w-30%">
        <div class="flex items-center">
          <n-avatar round :size="60" :src="userStore.avatar" />
          <div class="ml-20 flex-col">
            <span class="text-20 opacity-80">Hello, {{ userStore.name }}</span>
            <span class="mt-4 opacity-50">坚持不懈，砥砺前行！</span>
          </div>
        </div>

        <p class="mt-20 text-14 opacity-60">爱始于自我欺骗，却终于欺骗他们。</p>
        <p class="mt-12 text-right text-12 opacity-40">—— 王尔德</p>
      </n-card>
      <n-card class="ml-12 w-70%">
        <h3 class="text-20 font-normal opacity-90">⚡️欢迎使用 Buka Admin</h3>
        <p class="mt-8 opacity-60">
          这是一款基于 Vue3 + Vite + Pinia + Unocss + Naive UI 的轻量级后台管理模板！！！
        </p>
        <footer class="mt-24 flex items-center justify-end">
          <!-- <n-button
            tag="a"
            href="https://zclzone.github.io/vue-naive-admin-docs"
            target="_blank"
            type="primary"
            ghost
          >
            开发文档
          </n-button>
          <n-button
            tag="a"
            href="https://github.com/zclzone/vue-naive-admin"
            target="_blank"
            type="primary"
            class="ml-12"
          >
            代码仓库
          </n-button> -->
        </footer>
      </n-card>
    </div>
    <div class="mt-12 flex">
      <n-card title="项目" segmented>
        <template #header-extra>
          <n-button text type="primary">更多</n-button>
        </template>
        <div class="flex flex-wrap justify-between">
          <n-card
            v-for="i in 6"
            :key="i"
            size="small"
            class="my-6 w-320 flex-shrink-0 cursor-pointer hover:card-shadow"
            title="Vue Naive Admin"
          >
            <p class="op-60">一个基于 Vue3.0、Vite、Naive UI 的非TypeScript轻量级后台管理模板</p>
          </n-card>
          <div h-0 w-300></div>
          <div h-0 w-300></div>
          <div h-0 w-300></div>
          <div h-0 w-300></div>
        </div>
      </n-card>

      <n-card class="ml-12" title="快捷操作" segmented>
        <div class="flex flex-wrap justify-between">
          <n-card
            v-for="(qod, index) in quickOperationData"
            :key="index"
            size="small"
            class="my-6 h-180 w-250 flex-shrink-0 cursor-pointer hover:card-shadow"
            @click="redirectTo(qod.path)"
          >
            <div class="quickOperation_box">
              <div class="title_box">
                <span class="text">{{ qod.title }}</span>
              </div>
              <div class="img_box">
                <n-image
                  width="70"
                  :preview-disabled="true"
                  :src="quickOperationIconPath(qod.icon)"
                />
              </div>
            </div>
          </n-card>
        </div>
      </n-card>
    </div>
  </AppPage>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'
import * as echarts from 'echarts/core'
import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { useRouter } from 'vue-router'

const router = useRouter()

const userStore = useUserStore()

const quickOperationData = ref([
  {
    title: '表格管理',
    path: '/tableM',
    icon: 'table',
  },
  {
    title: '表单管理',
    path: '/form',
    icon: 'form',
  },
  {
    title: '数据大屏',
    path: '/screen',
    icon: 'screen',
  },
  {
    title: '数据字典',
    path: '/dictionary',
    icon: 'dictionary',
  },
  {
    title: '个人设置',
    path: '/setting',
    icon: 'setting',
  },
  {
    title: '代码仓库',
    path: '/warehouse',
    icon: 'warehouse',
  },
])

const redirectTo = (path) => {
  router.push({ path: path })
}

const quickOperationIconPath = (icon) => {
  return `https://wangweilun-1306462865.cos.ap-nanjing.myqcloud.com/buka_img/${icon}.png`
}

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  PieChart,
])
</script>

<style scoped>
.quickOperation_box {
  padding: 10px 0px 0px 0px;
  display: flex;
  flex-direction: column;

  .title_box {
    text-align: center;
    margin: 0px 0px 20px 0px;
    .text {
      font-size: 18px;
    }
  }
  .img_box {
    display: flex;
    justify-content: space-evenly;
    .n-image {
    }
  }
}
</style>
